<template>
  <div class="masters-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h2 class="main-title">非遗传承大师</h2>
      <p class="subtitle">匠心传承，守护非遗</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="filter-section">
      <el-input
        v-model="searchQuery"
        placeholder="搜索大师姓名或非遗项目"
        class="search-input"
        :prefix-icon="Search"
      />
      <el-select v-model="selectedCategory" placeholder="选择类别" class="category-select">
        <el-option
          v-for="category in categories"
          :key="category.value"
          :label="category.label"
          :value="category.value"
        />
      </el-select>
      <el-select v-model="selectedRegion" placeholder="选择地区" class="region-select">
        <el-option
          v-for="region in regions"
          :key="region.value"
          :label="region.label"
          :value="region.value"
        />
      </el-select>
    </div>

    <!-- 大师列表 -->
    <div class="masters-grid">
      <el-row :gutter="20">
        <el-col 
          v-for="master in filteredMasters" 
          :key="master.id" 
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
        >
          <el-card class="master-card" @click="showMasterDetail(master)">
            <div class="master-info">
              <el-avatar 
                :size="64" 
                :src="master.avatar || defaultUserAvatar"
                @error="() => true"
              />
              <div class="info-content">
                <h3>{{ master.name }}</h3>
                <p>{{ master.heritage }}</p>
                <div class="tags">
                  <el-tag size="small">{{ master.level }}</el-tag>
                  <el-tag size="small" type="success">{{ master.region }}</el-tag>
                </div>
              </div>
            </div>
            <p class="description">{{ master.description }}</p>
            <div class="card-footer">
              <el-button type="primary" @click="showMasterDetail(master)">查看详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 36, 48]"
        :total="totalMasters"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 大师详情弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedMaster?.name"
      width="60%"
      class="master-dialog"
    >
      <div class="master-detail" v-if="selectedMaster">
        <div class="detail-header">
          <div class="detail-avatar">
            <el-image :src="selectedMaster.avatar" fit="cover" />
          </div>
          <div class="detail-info">
            <h3>{{ selectedMaster.name }}</h3>
            <div class="detail-meta">
              <el-tag :type="selectedMaster.level === '国家级' ? 'danger' : 'warning'">
                {{ selectedMaster.level }}传承人
              </el-tag>
              <el-tag size="small" effect="plain">{{ selectedMaster.category }}</el-tag>
              <span class="detail-region">{{ selectedMaster.region }}</span>
            </div>
            <p class="detail-heritage">{{ selectedMaster.heritage }}</p>
          </div>
        </div>

        <el-tabs class="detail-tabs">
          <el-tab-pane label="个人简介">
            <div class="detail-content">
              <p>{{ selectedMaster.description }}</p>
              <div class="detail-achievements">
                <h4>主要成就</h4>
                <ul>
                  <li v-for="(achievement, index) in selectedMaster.achievements" :key="index">
                    {{ achievement }}
                  </li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="代表作品">
            <div class="detail-works">
              <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="(work, index) in selectedMaster.works" :key="index">
                  <el-image :src="work.image" fit="cover" class="work-image" />
                  <div class="work-info">
                    <h4>{{ work.title }}</h4>
                    <p>{{ work.description }}</p>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-tab-pane>
          <el-tab-pane label="传承故事">
            <div class="detail-stories">
              <el-timeline>
                <el-timeline-item
                  v-for="(story, index) in selectedMaster.stories"
                  :key="index"
                  :timestamp="story.date"
                  placement="top"
                >
                  <h4>{{ story.title }}</h4>
                  <p>{{ story.content }}</p>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import defaultUserAvatar from '@/assets/images/default_user_avatar.jpg';

// 状态管理
const searchQuery = ref('');
const selectedCategory = ref('');
const selectedRegion = ref('');
const currentPage = ref(1);
const pageSize = ref(12);
const dialogVisible = ref(false);
const selectedMaster = ref(null);

// 分类和地区数据
const categories = [
  { label: '全部', value: '' },
  { label: '传统技艺', value: 'craft' },
  { label: '传统美术', value: 'art' },
  { label: '传统音乐', value: 'music' },
  { label: '传统舞蹈', value: 'dance' }
];

const regions = [
  { label: '全部', value: '' },
  { label: '北京', value: 'beijing' },
  { label: '上海', value: 'shanghai' },
  { label: '广东', value: 'guangdong' },
  { label: '江苏', value: 'jiangsu' }
];

// 大师数据
const masters = ref([
  {
    id: 1,
    name: '张三',
    heritage: '剪纸艺术',
    description: '传承剪纸技艺多年，技艺精湛，作品多次获得国家级奖项。',

    avatar: defaultUserAvatar,
    level: '国家级',
    category: '传统美术',
    region: '北京',
    achievements: [
      '2018年获得中国工艺美术大师称号',
      '2019年作品《百鸟朝凤》获国家级金奖',
      '2020年被评为非物质文化遗产优秀传承人'
    ],
    works: [
      {
        title: '百鸟朝凤',
        image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
        description: '传统剪纸艺术与现代设计完美结合的代表作'
      },
      {
        title: '龙凤呈祥',
        image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
        description: '展现传统吉祥图案的剪纸作品'
      }
    ],
    stories: [
      {
        date: '2023-12-01',
        title: '传承之路',
        content: '从8岁开始学习剪纸，至今已有40余年...'
      },
      {
        date: '2023-11-15',
        title: '创新突破',
        content: '将传统剪纸艺术与现代设计理念相结合...'
      }
    ]
  },
  {
    id: 2,
    name: '李四',
    heritage: '陶瓷工艺',
    description: '擅长陶瓷制作，作品广受欢迎，多次参加国际展览。',

    avatar: defaultUserAvatar,
    level: '省级',
    category: '传统技艺',
    region: '景德镇',
    achievements: [
      '2017年获得省级工艺美术大师称号',
      '2018年作品《青花瓷》获省级金奖',
      '2019年被评为省级非物质文化遗产优秀传承人'
    ],
    works: [
      {
        title: '青花瓷',
        image: 'https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg',
        description: '传统青花瓷工艺的现代演绎'
      }
    ],
    stories: [
      {
        date: '2023-12-10',
        title: '匠心传承',
        content: '在景德镇陶瓷学院学习期间...'
      }
    ]
  }
]);

// 计算属性
const filteredMasters = computed(() => {
  let result = masters.value;

  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(master => 
      master.name.toLowerCase().includes(query) ||
      master.heritage.toLowerCase().includes(query)
    );
  }

  // 类别过滤
  if (selectedCategory.value) {
    result = result.filter(master => master.category === selectedCategory.value);
  }

  // 地区过滤
  if (selectedRegion.value) {
    result = result.filter(master => master.region === selectedRegion.value);
  }

  return result;
});

const totalMasters = computed(() => filteredMasters.value.length);

// 方法
const showMasterDetail = (master) => {
  selectedMaster.value = master;
  dialogVisible.value = true;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.masters-container {
  @apply min-h-screen bg-gray-50;
}

/* 顶部标题区域 */
.header-section {
  @apply text-center py-12 bg-white shadow-sm;
}

.main-title {
  @apply text-3xl font-bold text-gray-800 mb-2;
}

.subtitle {
  @apply text-gray-600;
}

/* 搜索和筛选区域 */
.filter-section {
  @apply bg-white p-4 flex flex-wrap gap-4 items-center justify-center shadow-sm;
}

.search-input {
  @apply w-64;
}

.category-select,
.region-select {
  @apply w-40;
}

/* 大师列表 */
.masters-grid {
  @apply max-w-7xl mx-auto p-6;
}

.master-card {
  @apply bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-lg;
}

.master-info {
  @apply p-4;
}

.master-info h3 {
  @apply text-xl font-semibold text-gray-800 mb-2;
}

.master-heritage {
  @apply text-primary-500 font-medium mb-2;
}

.master-description {
  @apply text-gray-600 text-sm mb-4 line-clamp-2;
}

.master-meta {
  @apply flex justify-between items-center;
}

.master-region {
  @apply text-sm text-gray-500;
}

/* 分页 */
.pagination-section {
  @apply flex justify-center py-6;
}

/* 详情弹窗 */
.master-dialog {
  :deep(.el-dialog__body) {
    @apply p-6;
  }
}

.detail-header {
  @apply flex gap-6 mb-6;
}

.detail-avatar {
  @apply w-32 h-32 rounded-lg overflow-hidden;
}

.detail-info {
  @apply flex-1;
}

.detail-info h3 {
  @apply text-2xl font-bold text-gray-800 mb-2;
}

.detail-meta {
  @apply flex items-center gap-2 mb-2;
}

.detail-region {
  @apply text-gray-500;
}

.detail-heritage {
  @apply text-primary-500 font-medium;
}

.detail-content {
  @apply space-y-6;
}

.detail-achievements {
  @apply mt-6;
}

.detail-achievements h4 {
  @apply text-lg font-semibold mb-4;
}

.detail-achievements ul {
  @apply list-disc list-inside space-y-2 text-gray-600;
}

.detail-works {
  @apply mt-6;
}

.work-image {
  @apply w-full h-full;
}

.work-info {
  @apply absolute bottom-0 left-0 right-0 p-4 bg-black bg-opacity-50 text-white;
}

.work-info h4 {
  @apply text-lg font-semibold mb-1;
}

.detail-stories {
  @apply mt-6;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .filter-section {
    @apply flex-col;
  }

  .search-input,
  .category-select,
  .region-select {
    @apply w-full;
  }

  .detail-header {
    @apply flex-col items-center text-center;
  }
}

/* Element Plus 样式覆盖 */
:deep(.el-tabs__nav-wrap::after) {
  @apply h-0.5;
}

:deep(.el-tabs__item) {
  @apply text-lg;
}

:deep(.el-tabs__item.is-active) {
  @apply text-primary-500;
}

:deep(.el-carousel__item) {
  @apply rounded-lg overflow-hidden;
}
</style>